<template>
  <div class="hello">
    <v-nav :current="'3'" :langType="lang" :lang="lang" :isEnShow="false"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner.jpg" alt="" style="width: 100%;border: 0">
      <!-- <div class="m-nav">
        <span>您的位置：</span>
        <el-breadcrumb separator="/" :class="newstyle">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">新闻中心</a></el-breadcrumb-item>
          <el-breadcrumb-item>正文</el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
    </div>
    <div class="main-out">
      <div class="daohang">
        <span @click="toList">新闻中心  ></span>  <span style="color: #2154b9;font-weight:bolder;cursor: auto">{{productIntroduce[13]}}</span>
      </div>
      <div class="main p-content">
        <div>
          <h1>{{listData.post_title}}</h1>
          <span>发布时间：{{listData.time}}</span>
          <!-- <div class="img-div">
            <img src="@/assets/det.png" alt="">
          </div>
          <div class="brief">
            <p>2018年6月6日下午，应西华大学生物工程学院邀请，四川普锐特医药科技有限责任公司总经理侯曙光博士、法规项目部经理周璇女士、成都倍特药业集团公司科技项目部主管高欢女士一行前往西华大学，在图书馆报告厅进行了一场 “药物工业化研发流程和理念：吸入药物案例分析”的专题学术报告。</p>
            <p>报告中，侯曙光博士结合多年学习和工作经验，以吸入药物研发为例，从药品生产企业的基本架构、质量源于设计（QbD）研发理念、 新药和仿制药的研发流程、医药研究者应具备的基本能力与素养等多个方面系统讲述了当代制药领域的发展和变化。侯曙光博士以风趣幽默的语言，生动形象地讲解了药物工业化研发相关的专业知识，博得学院师生们的一阵阵喝彩。</p>
            <p>报告结束时，师生们积极地进行了现场提问。针对大学生们提出的现代药品生产企业中政策法规、研发趋势以及生产经营等方面的问题，侯曙光博士进行了专业而又详尽的解答。最后，生物工程学院李锐教授做了总结发言，他再次对侯曙光博士来校进行学术报告表示衷心感谢，同时也对现场学子提出期许：希望大家脚踏实地的学习理论知识，为构建中国制造而努力奋斗，为成为一名“科学、知识和法规”全面发展的专业医药从业人员而不懈努力</p>
            <p>会后，侯曙光博士与生物工程学院李玉峰副院长就未来双方在学术交流、人才引进、科技项目等方面的合作进行了全面交流。</p>
          </div> -->
          <div class="brief" v-html="listData.post_content"></div>
          <div class="page">
            <p>
              <span v-if="!!lastTitle">上一篇：</span><span v-if="!!lastTitle" @click="_getLast(listData.last.id)">{{lastTitle}}</span>
              <span v-if="!lastTitle">无上一篇新闻</span>
            </p>
            <p>
              <span v-if="!!nextTitle">下一篇：</span><span v-if="!!nextTitle" @click="_getLast(listData.next.id)">{{nextTitle}}</span>
              <span v-if="!nextTitle">无下一篇新闻</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import {mapGetters} from 'vuex'
import { getInfoData } from '@/services/api.js'
export default {
  name: 'newsDetails',
  data () {
    return {
      activeName: 'second',
      id: null,
      listData: []
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'productIntroduce': 'productIntroduce'
    }),
    lastTitle () {
      if (!!this.listData.last.title) return this.listData.last.title.substring(0, 20) + '...'
      else return ''
    },
    nextTitle () {
      if (!!this.listData.next.title) return this.listData.next.title.substring(0, 20) + '...'
      else return ''
    }
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    _getChList (id) {
      let params = {
        id: id
      }
      getInfoData(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    _getEnList () {
    },
    version (id) {
      if (this.lang === 1) {
        this._getChList(id)
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    },
    _getLast (id) {
      this.version(id)
    },
    toList () {
      this.$router.push('/news')
    }
  },
  created () {
    this.id = this.$route.params.id
    this.version(this.id)
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .foot {
    margin-top: 0
  }
  .m-nav {
    position: absolute;
    display: flex;
    bottom: 13px;
    width: 1200px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    color: #fff;
  }
  .main-out {
    background-color: #f5f5f5;
    padding-top: 12px;
    padding-bottom: 53px;
    .main {
      // height: 1074px;
      padding-bottom: 20px;
      background-color: #fff;
      h1 {
        font-size: 18px;
        letter-spacing: 2px;
        color: #333333;
        text-align: center;
        padding-top: 37px;
        padding-bottom: 20px
      }
      span {
        font-size: 14px;
        letter-spacing: 1px;
        color: #666666;
        display: block;
        text-align: center
      }
      .img-div {
        width: 1000px;
        height: 440px;
        margin: 0 auto;
        margin-top: 43px;
        margin-bottom: 38px;
        img {
          width: 100%;
          height: 100%
        }
      }
      .brief {
        width: 1000px;
        margin: 0 auto;
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        p {
          // font-size: 16px;
          // letter-spacing: 1px;
          // color: #666;
          // text-indent: 30px;
          // line-height: 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      .page {
        width: 1000px;
        margin: 0 auto;
        margin-top: 52px;
        display: flex;
        p {
          display: flex;
          justify-content: center;
          width: 50%;
          font-size: 16px;
          letter-spacing: 1px;
          span {
            color: #333;
          }
          span:nth-child(2):hover {
            color: #2154b9;
            cursor: pointer
          }
        }
      }
    }
  }
  .daohang {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 20px 0;
    span {
      color: #666
    }
  }
  .daohang span:hover {
    color: #2154b9;
    cursor: pointer;
  }
</style>
